<template>
	<view class="master-income-record" v-if="isLoad">
		<view class="mine-menu-list c-base" :style="{background:primaryColor}">
			<view class="space-lg"></view>
			<view class="flex-center">
				<view class="flex-column flex-center">
					<view class="money-info flex-center flex-y-baseline">¥<view class="f-md-title">{{detail.quota || 0}}
						</view>
					</view>
					<view class="flex-center f-caption mt-sm mb-sm">剩余额度(元)</view>
				</view>
				<view class="flex-column flex-center" style="margin-left: 50rpx;">
					<view class="money-info flex-center flex-y-baseline">¥<view class="f-md-title">{{(Number(detail.total_quota*1 - detail.quota*1).toFixed(2)) || 0}}
						</view>
					</view>
					<view class="flex-center f-caption mt-sm mb-sm">已用额度(元)</view>
				</view>
				<view class="flex-column flex-center" style="margin-left: 50rpx;">
					<view class="money-info flex-center flex-y-baseline">¥<view class="f-md-title">{{detail.foundation_quota || 0}}
						</view>
					</view>
					<view class="flex-center f-caption mt-sm mb-sm">基础额度(元)</view>
				</view>
			</view>
			<view class="space-lg"></view>
			<view class="cash-out-btn flex-center radius fill-base f-paragraph c-title " @tap="$util.goUrl({url: `/user/pages/limit/recharge`})">增加额度</view>
			<view class="space-md"></view>
			<view class="space-lg"></view>
		</view>
		<view class="money-count fill-base flex-center pt-md pb-md">
			<view class="item-child flex-center flex-column" @tap="$util.goUrl({url: `/user/pages/limit/detail`})">
				<view class="f-caption  flex-center">额度明细</view>
			</view>
			<view class="item-child flex-center flex-column b-1px-l" @tap="$util.goUrl({url: `/user/pages/limit/consume`})">
				<view class="f-caption ">查看消耗</view>
			</view>
		</view>
		<view class="f-caption c-caption pd-lg">
			中介公司基础发单额度{{configInfo.company_quota_switch ? configInfo.company_quota : 0}}元，
			每发一笔中介公司订单会消耗发单额度，订单完成后会
			恢复相应的发单额度。
		</view>
		
		<view class="mt-md">
			<view class="flex-between h-110 pl-lg pr-lg fill-base">
				<view class="flex-center" @tap="onChange">
					<text class="pr-sm text-bold">{{statusList[param.status].label}}</text>
					<i class="iconfont icon-down" style="color: #ccc;font-size: 10px;"></i>
				</view>
				<view class="flex-center">
					<view class="f-desc date-box flex-center" 
					:class="[{'c-title': check_time.start_time},{'c-caption': !check_time.start_time}]" 
					@tap="toShowTime('start_time')">{{check_time.start_time || `开始时间`}}</view>
					<text class="pl-md pr-md">-</text>
					<view class="f-desc date-box flex-center" 
					:class="[{'c-title': check_time.end_time},{'c-caption': !check_time.end_time}]" 
					@tap="toShowTime('end_time')">{{check_time.end_time || `结束时间`}}</view>
				</view>
			</view>
			<view class="apply-item ml-md mt-md mr-md pd-lg fill-base radius-16" v-for="(item,index) in list.data" :key="index">
				<view class="flex-between">
					<view class="flex-y-center f-desc c-caption">
						<text>申请号：</text>
						<text class="c-title">{{item.order_code}}</text>
					</view>
					<text :style="{color: statusType[item.status].color}">{{statusType[item.status].name}}</text>
				</view>
				<view class="flex-y-center f-desc mt-sm c-caption">
					<text>申请额度：</text>
					<text class="c-warning">￥{{item.money}}</text>
				</view>
				<view class="flex-y-center f-desc mt-sm c-caption">
					<text>申请时间：</text>
					<text class="c-title">{{$util.formatTime(item.create_time*1000, 'YY-M-D h:m')}}</text>
				</view>
			</view>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
			v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<view class="space-footer"></view>
		<w-picker mode="date" :startYear="startYear*1-10" :endYear="startYear"
			:value="curDay" :current="false" fields="day"
			@confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>
		<w-picker mode="selector" :options="statusList" :themeColor="primaryColor"
			:visible.sync="showType" @confirm="selectConfirm($event , 'status')">
		</w-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				detail: {},
				isLoad: false,
				param: {
					status: 0,
					start_time: '',
					end_time: ''
				},
				loading: true,
				lockTap: false,
				curDay: '',
				startYear: '',
				showDate: false,
				check_time: {
					month: '',
					start_time: '',
					end_time: ''
				},
				showType: false,
				statusList:[
					{label:'全部',value:0},
					{label:'申请中',value:1},
					{label:'审核通过',value:2},
					{label:'审核拒绝',value:3}
				],
				statusType: {
					1: {name: '申请中', color: '#1BCA62'},
					2: {name: '审核通过', color: '#4699FF'},
					3: {name: '审核拒绝', color: '#FF2404'}
				},
				list: {
					data: []
				}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.options = options
			this.$util.showLoading()
			await this.initIndex()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.loading = true;
			this.getList(this.param.page + 1);
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.check_time.start_time = ''
				this.check_time.end_time = ''
				this.param.start_time = ''
				this.param.end_time = ''
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				this.curDay = this.$util.formatTime(cur_time, 'YY-M-D')
				this.startYear = this.$util.formatTime(cur_time, 'YY')
				await this.getDetail()
				this.getList(1)
			},
			async initRefresh(){
				this.$util.showLoading()
				this.initIndex(true)
			},
			async getDetail(){
				let data = await this.$api.user.companyInfo()
				this.detail = data
			},
			selectConfirm(e, type){
				console.log(e, type)
				this.param[type] = e.value
				this.getList(1)
			},
			toShowTime(key) {
				if ( key == 'end_time' && !this.check_time.start_time) {
					this.$util.showToast({
						title: `请选择开始时间`
					})
					return
				}
				let showTime = this.check_time[key]
				if (showTime) {
					if (key == 'month') {
						this.curMonth = showTime
					} else {
						this.curDay = showTime
					}
				}
				this.showKey = key
				this.showDate = true
			},
			async getList(page = 0){
				if (page) {
					this.param.page = page
				}
				let {
					list: oldList,
					param,
					check_time
				} = this
				
				let {
					start_time = '',
					end_time = ''
				} = check_time
				
				if(start_time){
					param.start_time = this.$util.DateToUnix(start_time + ' 00:00:00')
				}
				if(end_time){
					param.end_time = this.$util.DateToUnix(end_time + ' 23:59:59')
				}
				let newList = await this.$api.user.quotaList(param)
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.isLoad = true
				this.$util.hideAll()
			},
			onChange(e){
				this.showType = true
			},
			async onConfirm(val) {
				let {
					start_time,
					end_time
				} = this.check_time
				let {
					showKey,
					activeIndex = 1
				} = this
				let show_unit = this.$util.DateToUnix(showKey == 'month' ? `${val.result}-01` : val.result)
				let start_unit = start_time ? this.$util.DateToUnix(start_time) : 0
				let end_unit = end_time ? this.$util.DateToUnix(end_time) : 0
				let cur_month = this.$util.formatTime(new Date(Math.ceil(new Date().getTime())), 'YY-M-D')
				let cur_unit = this.$util.DateToUnix(cur_month) + 1
			
				let msgType = {
					month: '开始月份',
					start_time: '开始时间',
					end_time: '结束时间',
				}
			
				if (show_unit > cur_unit) {
					this.$util.showToast({
						title: `${msgType[showKey]}不能选择未来时间哦`
					})
					return
				}
			
				if (activeIndex == 1 && ((showKey == 'start_time' && end_unit && end_unit < this.$util.DateToUnix(val
							.result)) ||
						(showKey == 'end_time' && start_unit && start_unit > this.$util.DateToUnix(val.result)))) {
					this.$util.showToast({
						title: `结束时间不能小于开始时间`
					})
					return
				}
				this.check_time[showKey] = val.result
				
				if(this.check_time.start_time && this.check_time.end_time){
					this.getList(1)
				}
			},
		}
	}
</script>


<style lang="scss">
	.master-income-record {

		.mine-menu-list {

			.money-info {
				font-size: 30rpx;

				.money {
					font-size: 70rpx;
				}
			}

		}
		.cash-out-btn {
			width: 200rpx;
			height: 56rpx;
			margin: 0 auto;
		}
		.money-count {
			.item-child {
				width: 50%;
			}
		}
		.date-box{
			width: 220rpx;
			border-radius: 10rpx;
			border: 1px solid #ccc;
			height: 60rpx;
		}
		
	}
</style>
